<template>
  <CustomNavbar/>
  <scroll-view @scrolltolower="onScrolltolower" refresher-enabled 
  @refresherrefresh="onRefresherrefresh" :refresher-triggered="isTriggered"
   class="scroll-view" scroll-y>
   <PageSkeleton v-if="isLoading"/> 
   <template v-else>
    <TreeSwiper :list="bannerList"/>
   <!-- 分类面板 -->
   <!-- <CategoryPanel :list="categoryList"/> -->
   <!-- 推荐商品 -->
   <RecommendGoods ref="recommendRef"/>
 </template>
  </scroll-view>
 </template>
 
 <script setup>
 import { ref } from 'vue';
 import { onLoad } from '@dcloudio/uni-app';
 import TreeSwiper from '../../components/TreeSwiper.vue';
 import CustomNavbar from '../mall/components/CustomNavbar.vue'; 
 import CategoryPanel from '../mall/components/CategoryPanel.vue';
 import RecommendGoods from '../../components/RecommendGoods.vue';
 import { getHomeBannerAPI,getCategoryListAPI } from '../../services/mall';
 import PageSkeleton from './components/PageSkeleton.vue';
 
 const bannerList=ref([])
 //获取推荐商品实例
 const recommendRef=ref()
 //获取轮播图 1.获取数据 2.赋值给bannerList
 const getHomeBannerData=async()=>{
   const res=await getHomeBannerAPI()
   bannerList.value=res.data
 }
 const categoryList=ref([])
 //获取分类列表
 const getCategoryListData=async()=>{
   /* const res=await getCategoryListAPI()
   categoryList.value=res.data */
 }
 const isLoading=ref(false)
 onLoad(async()=>{
  isLoading.value=true
  Promise.all([getHomeBannerData(),getCategoryListData()])
  .then(()=>{
    isLoading.value=false
  })
  .catch(()=>{
    isLoading.value=false
  })
  
 })
 const isTriggered = ref(false)
 //自定义下拉刷新
 const onRefresherrefresh = async() => { 
  //开始动画
   isTriggered.value = true
  console.log('下拉刷新');
  //重置推荐商品数据
  recommendRef.value.resetData()
  await Promise.all([getHomeBannerData(),getCategoryListData(),recommendRef.value.getMore()])
  //结束动画
  isTriggered.value = false
 }
 //滚动到底部
 const onScrolltolower = () => {
  console.log('滚动到底部');
  recommendRef.value.getMore()
 }

 </script>
 
 <style lang="scss">
 page{
   background-color: #f7f7f7;
   height: 100%;
   display: flex;
   flex-direction: column;
 }
 .scroll-view{
   height: calc(100vh - 50px); /* 根据导航栏高度调整 */
    flex: 1;
 }
 
 </style>